<script setup lang="ts">
import { useDraggable } from '@vueuse/core'
import { ref, defineAsyncComponent, useTemplateRef, onMounted, watch } from 'vue'
import RestartIcon from '@/components/DebugableMonacoEditor/assets/RestartIcon.vue'
// @ts-ignore
import PauseIcon from '@/components/DebugableMonacoEditor/assets/PauseIcon.vue'
import ContinueIcon from '@/components/DebugableMonacoEditor/assets/ContinueIcon.vue'
import StartIcon from '@/components/DebugableMonacoEditor/assets/StartIcon.vue'
import StepOverIcon from '@/components/DebugableMonacoEditor/assets/StepOverIcon.vue'
import StepOutIcon from '@/components/DebugableMonacoEditor/assets/StepOutIcon.vue'
import StepIntoIcon from '@/components/DebugableMonacoEditor/assets/StepIntoIcon.vue'
import StepBackIcon from '@/components/DebugableMonacoEditor/assets/StepBackIcon.vue'
import StopIcon from '@/components/DebugableMonacoEditor/assets/StopIcon.vue'
// @ts-ignore
import StackframeIcon from '@/components/DebugableMonacoEditor/assets/StackframeIcon.vue'
import StackFrameActiveIcon from '@/components/DebugableMonacoEditor/assets/StackFrameActiveIcon.vue'
type DebugStatus = 'running' | 'paused' | 'stopped'
type DebugAction =
    | 'restart'
    | 'pause'
    | 'continue'
    | 'start'
    | 'stepOver'
    | 'stepOut'
    | 'stepInto'
    | 'stepBack'
    | 'stop'
    | 'none'
const debugStatus = ref<DebugStatus>('stopped')
const debugAction = ref<DebugAction>('start')
const toolList = [
    {
        name: 'Restart',
        icon: RestartIcon,
        color: 'blue',
        title: 'Restart the program execution',
        action: () => {
            console.log('Restart')
        }
    },
    {
        name: 'Pause',
        icon: PauseIcon,
        color: 'green',
        title: 'Pause the program execution',
        action: () => {
            console.log('Pause')
        }
    },
    {
        name: 'Continue',
        icon: ContinueIcon,
        color: 'green',
        title: 'Continue the program execution',
        action: () => {
            console.log('Continue')
        }
    },
    {
        name: 'Start',
        icon: StartIcon,
        color: 'green',
        title: 'Start the program execution',
        action: () => {
            console.log('Start')
        }
    },
    {
        name: 'Step Over',
        icon: StepOverIcon,
        color: 'green',
        title: 'Step over the current line of code',
        action: () => {
            console.log('Step Over')
        }
    },
    {
        name: 'Step out',
        icon: StepOutIcon,
        color: 'green',
        title: 'Step out of the current function',
        action: () => {
            console.log('Step out')
        }
    },
    {
        name: 'Step into',
        icon: StepIntoIcon,
        color: 'green',
        title: 'Step into the current function',
        action: () => {
            console.log('Step into')
        }
    },
    {
        name: 'Step back',
        icon: StepBackIcon,
        color: 'green',
        title: 'Step back to the previous line of code',
        action: () => {
            console.log('Step back')
        }
    },
    {
        name: 'Stop',
        icon: StopIcon,
        color: 'red',
        title: 'Stop the program execution',
        action: () => {
            console.log('Stop')
        }
    },
    {
        name: 'Stack Frame',
        icon: StackframeIcon,
        color: 'blue',
        title: 'Show the stack frame',
        action: () => {
            console.log('Stack Frame')
        }
    },
    {
        name: 'Stack Frame Active',
        icon: StackFrameActiveIcon,
        color: 'blue',
        title: 'Show the active stack frame',
        action: () => {
            console.log('Stack Frame Active')
        }
    }
]

const el = useTemplateRef('el')
const { x, y, isDragging, style, position } = useDraggable(el, {
    preventDefault: true
})
const [minX, maxX, minY, maxY] = [0, 100, 0, 100]
watch(position, (newPosition) => {
    if (newPosition.x < minX) {
        x.value = minX
    } else if (newPosition.x > maxX) {
        x.value = maxX
    }
    if (newPosition.y < minY) {
        y.value = minY
    } else if (newPosition.y > maxY) {
        y.value = maxY
    }
})
</script>

<template>
    <div :style="style" class="flex flex-col w-[2rem] bg-gray-100" ref="el" style="position: fixed">
        <a-tooltip
            v-for="(item, index) in toolList"
            :title="item.title"
            :key="index"
            placement="Left"
            :color="item.color"
        >
            <a-button shape="circle" @click="item.action">
                <template #icon>
                    <!-- <img :src="defineAsyncComponent(item.icon)" class="w-[1.25rem] h-[1.25rem]" /> -->
                    <component :is="item.icon" class="w-[1.25rem] h-[1.25rem]" />
                </template>
            </a-button>
        </a-tooltip>
    </div>
</template>
